<template>
    <div>
        <div class="body">
            <head-nav></head-nav>
            <div class="center1">
                <div class="center1-top">
                    <h1>路线规划</h1>
                </div>
                <div class="center2">
                    <div class="center-left">
                        <form action="">
                            <input type="text" id="start" placeholder="请输入起点详细信息" v-model="startName"><br>
                            <input type="text" id="end" placeholder="请输入终点详细信息" v-model="endName"><br>
                            <input type="button"  @click="goView" value="开始查询">
                           <!-- 起始位置：<el-input id="start" v-model="startName"></el-input>
                            结束位置：<el-input id="end" v-model="endName"></el-input>
                            <el-button @click="goView">查询</el-button>-->
                        </form>
                    </div>
                    <div id="container">
                       <!--<div id="container">

                       </div>-->
                    </div>
                </div>
                <div class="btntn">
                    <input type="button" class="JDone" @click="goUrl" value="去景点">
                    <input type="button" class="JDtwo" @click="goJd" value="去酒店">
                </div>
            </div>
            <foot-nav></foot-nav>
        </div>
    </div>
</template>
<script>
    import AMapLoader from '@amap/amap-jsapi-loader'
    import HeadNav from "@/components/HeadNav";
    import FootNav from "@/components/FootNav";
    export default {
        name: "LookMapGo",
        data(){
          return{
              map: null,
              startName: '',
              endName: ''
          }
        },
        components:{
            HeadNav,FootNav
        },
        mounted() {
            window._AMapSecurityConfig = {
                securityJsCode: '85a91ffe4a2352c238f81b9a867de09c' // 申请key对应的秘钥
            }
            // DOM初始化完成进行地图初始化
            this.initMap()
        },
        methods:{
            goView() {
                // eslint-disable-next-line no-undef
                const driving = new AMap.Driving({
                    map: this.map,
                    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                    // eslint-disable-next-line no-undef
                    policy: AMap.DrivingPolicy.LEAST_TIME
                })
                const points = [
                    { keyword: this.startName, city: '全国' },
                    { keyword: this.endName, city: '全国' }
                ]

                driving.search(points, (status, result) => {
                    // 未出错时，result即是对应的路线规划方案
                    console.log('status=', status)
                    console.log('result=', result)
                })
            },
            initMap() {
                AMapLoader.load({
                    key: 'a475456f6fb6a5105eb474908a61d4de', // 申请好的Web端开发者Key，首次调用 load 时必填
                    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then(AMap => {
                    this.map = new AMap.Map('container', { // 设置地图容器id
                        viewMode: '3D', // 是否为3D地图模式
                        zoom: 4, // 初始化地图级别
                        center: [105.602725, 37.076636],// 初始化地图中心点位置
                        //mapStyle:'amap://styles/darkblue',
                    })
                    const autoOptions = {
                        // city 限定城市，默认全国
                        city: '全国',
                        input: 'start'
                    }
                    // 实例化AutoComplete
                    const autoComplete = new AMap.AutoComplete(autoOptions)
                    const autoOptions2 = {
                        // city 限定城市，默认全国
                        city: '全国',
                        input: 'end'
                    }
                    // 实例化AutoComplete
                    const autoComplete2 = new AMap.AutoComplete(autoOptions2)
                    // 根据关键字进行搜索
                    /* autoComplete.search(this.startName, (status, result) => {
                      // 搜索成功时，result即是对应的匹配数据
                      console.log(result)
                    }) */
                }).catch(e => {
                    console.log(e)
                })
            },
            goUrl(){
                this.$router.push({path:'/jingdian'})
            },
            goJd(){
                this.$router.push({path:'/hotelView'})
            }
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .body{
        background: rgb(235,235,235);
        text-align: center;
    }
    .center1{
        display: flex;
        flex-direction: column;
        width: 1180px;
        min-height: 350px;
        margin: 30px auto;
        background: white;
        padding-top: 40px;
    }
    .center1-top{
        flex: 1;
    }
    .center2{
        flex: 1;
        width: 1180px;
        min-height: 350px;
        margin: 0 auto;
        background: white;
        padding-top: 40px;
        display: flex;
    }
    .center-left input:focus{
        outline: none;
        border-color: rgba(82,168,236,0.8);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    }
    .center-left input:nth-of-type(1){
        height: 40px;
        width: 280px;
        margin-top: 40px;
        text-align: center;
        border-radius: 5px;
        border: none;
    }
    .center-left input:nth-of-type(2){
        height: 40px;
        width: 280px;
        margin-top: 40px;
        text-align: center;
        border-radius: 5px;
        border: none;
    }
    .center-left input:nth-of-type(3){
        height: 40px;
        width: 100px;
        border: none;
        background: dodgerblue;
        color: white;
        margin: 40px;
        border-radius: 3px;
    }
    .center-left{
        margin-left: 160px;
        border: 1px solid green;
        background: rgb(235,235,235);
        width: 350px;
        height: 270px;
        flex: 1;
    }
    #container{
        margin-right: 160px;
        margin-left: 30px;
        border: 1px solid green;
        background: rgb(235,235,235);
        width: 350px;
        height: 270px;
        flex: 1;
    }
    .btntn{
        display: flex;
    }
    .JDone{
        background: #409EFF;
        border: none;
        color: white;
        height: 50px;
        flex: 1;
    }
    .JDtwo{
        background: #0085d0;
        border: none;
        color: white;
        height: 50px;
        flex: 1;
    }

</style>
